<template>
	<view class="page">
		<u-loading-icon v-if="info==''" style="margin-top: 30rpx;" text="加载中" textSize="16" color="#01B192" textColor="#01B192"></u-loading-icon>
		<view class="page1" v-if="info!=''&&info.id!=4">
			<view class="return" @click="toReturn()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;">
				<u-icon name="arrow-left" size="20"></u-icon>
			</view>
			<view class="title">{{info.title}}</view>
			<view class="tit-info flex between">
				发布时间：{{info.create_time}}
				<view>阅读：{{info.pv}} 次</view>
			</view>
			<view class="content">
				<u-parse :content="info.content"></u-parse>
			</view>
			<video v-if="info.path!=''" :poster="info.cover" class="myVideo"
				:src="'https://gxtravel.ncscloudmedia.com'+info.path" controls></video>
		</view>
		<view class="content" v-if="info!=''&&info.id==4">
			<view class="return" @click="toReturn2()"
				style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;z-index: 2;top: 120rpx;">
				<u-icon name="arrow-left" size="20"></u-icon>
			</view>
			<image src="/static/news/bg3.png" mode="widthFix" class="bgCon"></image>
			<view class="imgs flex align between">
				<view class="imgItem" @click="toUrl(item.description)" v-for="(item,index) in imgList" :key="index">
					<image :src="item.path" mode="widthFix" class="img"></image>
					<!-- <view class="more" v-if="item.description!=''">查看详情</view> -->
					<image v-if="item.description!=''" src="/static/news/more2.png" mode="widthFix" class="more"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		articleDetail,
		positionList
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				info: '',
				imgList: [],
				type: 1,
				ws: null,
				path: '/pages/news/detail'
			}
		},
		onLoad(option) {
			this.article_id = option.id
			if (option.type) {
				this.type = option.type
			}
			this.getInfo()
		},
		onShow() {
			this.connectWebSocket()
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods: {
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				that.ws = new WebSocket(wsUrl);
				that.ws.onopen = () => {
					//console.log("连接已建立");
					// 这里可以发送初始化消息等
					that.sendData({
						type: 'page_enter',
						path: that.path,
						params: ""
					});
				};
				that.ws.onmessage = (event) => {
					console.log("Message from server ", event.data);
					// 处理接收到的消息
				};
				that.ws.onerror = (error) => {
					console.error("连接失败: ", error);
				};
				that.ws.onclose = () => {
					console.log("连接失败，重新连接");
					// 可以在这里尝试重新连接
					that.connectWebSocket();
				};
			},
			// 发送
			sendData(data) {
				if (this.ws && this.ws.readyState === WebSocket.OPEN) {
					// this.ws.send(data); // 确保发送JSON格式的数据
					this.ws.send(JSON.stringify(data)); // 确保发送JSON格式的数据
				} else {
					console.error("WebSocket is not open");
				}
			},
			toUrl(u) {
				if(u!=''){
					window.location.href = u
				}
			},
			toReturn() {
				if(this.type==3){
					window.history.back();
				}else{
					uni.navigateBack()
				}
			},
			toReturn2() {
				if (this.type == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					uni.redirectTo({
						url: '/pages/news/news'
					})
				}

			},
			async getInfo() {
				const result = await articleDetail({
					article_id: this.article_id
				})
				if(result.data.url==''){
					this.info = result.data
					if(result.data.id==4){
						this.getList()
					}
				}else{
					window.location.replace(result.data.url)
				}
			},
			async getList() {
				const result = await positionList({
					position_id: 20
				})
				this.imgList = result.data
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {}

	.return {}

	.page1 {
		padding: 80rpx 32rpx;
	}

	.title {
		font-size: 32rpx;
		// text-align: center;
		font-weight: bold;
	}

	.tit-info {
		font-size: 26rpx;
		// text-align: center;
		margin: 16rpx 0 30rpx;
		color: grey;
	}

	.content {
		font-size: 28rpx;
		position: relative;

		.bgCon {
			width: 100%;
		}

		.imgs {
			position: absolute;
			top: 345rpx;
			padding: 0 20rpx;
			flex-wrap: wrap;

			.imgItem {
				width: 345rpx;
				position: relative;
				margin-bottom: 14rpx;

				.img {
					width: 100%;
				}

				.more {
					width: 112rpx;
					position: absolute;
					top: 0rpx;
					right: 12rpx;
					// box-shadow: 1rpx 2rpx 10rpx 2rpx gainsboro;
					// background: #FF9F00;
					color: white;
					font-size: 20rpx;
					border-radius: 20rpx;
					text-align: center;
					line-height: 1;
					padding: 10rpx 0;
					// border: solid 2rpx #FFC462;
				}
			}
		}

		// .imgItem {
		// 	position: absolute;
		// }

		// .img1 {
		// 	width: 290rpx;
		// 	top: 265rpx;
		// 	left: 23rpx;
		// }

		// .img2 {
		// 	width: 350rpx;
		// 	top: 230rpx;
		// 	right: 15rpx;
		// }

		// .img3 {
		// 	width: 138rpx;
		// 	top: 385rpx;
		// 	left: 23rpx;
		// }

		// .img4 {
		// 	width: 240rpx;
		// 	top: 385rpx;
		// 	left: 170rpx;
		// }

		// .img5 {
		// 	width: 240rpx;
		// 	top: 385rpx;
		// 	right: 28rpx;
		// }

		// .img6 {
		// 	width: 328rpx;
		// 	top: 560rpx;
		// 	left: 23rpx;
		// }

		// .img7 {
		// 	width: 314rpx;
		// 	top: 560rpx;
		// 	right: 11rpx;
		// }

		// .img8 {
		// 	width: 225rpx;
		// 	top: 700rpx;
		// 	left: 23rpx;
		// }

		// .img9 {
		// 	width: 210rpx;
		// 	top: 700rpx;
		// 	left: 260rpx;
		// }

		// .img10 {
		// 	width: 185rpx;
		// 	top: 700rpx;
		// 	right: 20rpx;
		// }
	}

	.myVideo {
		width: 100%;
		object-fit: cover;
		// overflow: hidden;
		// width: 100%;
		// // height: 360px;
		// /* 设置一个固定的高度 */
		// position: relative;
		// .myVideo {
		// 	width: 100%;
		// 	object-fit: fill;
		// 	height: auto;
		// 	// height: 100%;
		// }
	}
</style>